@import "./common2";

@function getvw($w) {
    @return($w/1920)*100+vw;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    user-select: none;
    // box-sizing: border-box;
}

body,
html {
    min-width: 900px;
}

.box{
    nav {
        .nav_center {
            ul {
                li:nth-of-type(7) {
                    height: 65px;
                    text-align: center;
                    line-height: 65px;
                    border-bottom: 1px solid #19bc64;
                    a {
                        color: #19bc64;
                    }
                }
            }
        }
    }

    .banner{
        width: 100%;
        height: getvw(398);
        position: relative;
        img{
            width: 100%;
            height: getvw(398);
        }
        .text{
            width: 100%;
            height: getvw(398);
            background-color:rgba($color: #000000, $alpha: 0.3);
            position: absolute;
            top: 0;
            left: 0;

            p{
                text-align: center;
                color: white;
                font-weight: 100;
            }
            p:nth-of-type(1){
                font-size: getvw(48);
                margin: getvw(135) 0 getvw(20) 0;
            }
            p:nth-of-type(2){
                font-size: getvw(30);
            }
        }
    }

    .call_us{
        width: 100%;
        height: getvw(430);
        background-color: #f1f1f1;
        position: relative;

        .call_us_box{
            width: getvw(466);
            height: getvw(390);
            background-color: white;
            position: absolute;
            top: getvw(-35);
            left: 50%;
            margin-left: getvw(-233);
            color: #333333;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;

            p:nth-of-type(1){
                font-size: getvw(30);
            }
            p:nth-of-type(2){
                font-size: getvw(28);
            }
            p:nth-of-type(3){
                font-size: getvw(16);
            }
            p:nth-of-type(4){
                font-size: getvw(16);
                font-weight: 700;
            }
            button{
                width: getvw(191);
                height: getvw(40);
                border-radius: getvw(30);
                border: none;
                color: white;
                cursor: pointer;
            }
            button:nth-of-type(1){
                background-color: #19bc64;
            }
            button:nth-of-type(2){
                background-color: #bd7738;
            }
        }
    }

    .self_access_content{
        width: 100%;
        height: getvw(349);
        p{
            text-align: center;
            font-size: getvw(24);
            font-weight: 700;
            margin: getvw(40) 0;
        }
        .self_access_content_main_box{
            width: getvw(1200);
            height: getvw(260);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

            ul{
                width: getvw(100);
                height: getvw(245);
                font-size: getvw(16);
                color: #333333;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                
                li{
                    cursor: pointer;

                }
                li:nth-of-type(1){
                    font-size: getvw(24);
                }
            }
        }
    }

}